<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
//1.引入图表的构造函数
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    // 封装图表的方法
    loadCharts() {
      fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json"
      )
        .then((res) => res.json())
        .then((data) => {
          const line = new Line(this.$refs["container"], {
            data,
            padding: "auto",
            xField: "Date",
            yField: "scales",
            annotations: [
              // 低于中位数颜色变化
              {
                type: "regionFilter",
                start: ["min", "median"],
                end: ["max", "0"],
                color: "#F4664A",
              },
              {
                type: "text",
                position: ["min", "median"],
                content: "中位数",
                offsetY: -4,
                style: {
                  textBaseline: "bottom",
                },
              },
              {
                type: "line",
                start: ["min", "median"],
                end: ["max", "median"],
                style: {
                  stroke: "#F4664A",
                  lineDash: [2, 2],
                },
              },
            ],
            yAxis: {
              // 刻度数量
              tickCount: 7,
            },
            // 更改提示框样式
            tooltip: {
              fields: ["Date", "scales"],
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });

          line.render();
        });
    },
  },
  // 生命周期 钩子函数 dom挂载到页面
  mounted() {
    this.loadCharts();
  },
};
</script>

<style>
</style>